<template>
   <div class="layout-header-bar">
      <div class="layout-logo">珊瑚科技电商后台管理系统</div>
      <div class="layout-menu">
          <el-menu
                  mode="horizontal"
                  background-color="unset"

                  active-text-color="#fff"
                  @select="handleSelect">
              <el-submenu index="lang">
                  <template slot="title">{{langOption[lang]}}</template>
                  <el-menu-item :index="key" v-for="(value,key) in langOption ">{{value}}</el-menu-item>
              </el-submenu>
              <el-submenu index="info">
                  <template slot="title">
                   <span class="el-dropdown-link userinfo-inner">
                       <i class="iconfont icon-user"></i>
                       <span>{{userName}}</span>
                   </span>
                  </template>
                  <el-menu-item index="editpwd" >{{$t('common.modifyPassword')}}</el-menu-item>
                  <el-menu-item index="logout" >{{$t('common.logout')}}</el-menu-item>
              </el-submenu>
          </el-menu>
      </div>


   </div>
</template>

<script>
    export default {
        data(){
            return {
                userName:this.getStore('user'),
                lang:'',
                langOption:{
                    zh:'简体中文',
                    ina:'Bahasa Indonesia',
                }
            }
        },

        methods: {
            editpwd() {
                this.$router.push({path:'/user/modifyPwd'})
            },
            logout(){
                localStorage.removeItem("token")
                this.$router.push('/login')
            },
            langInfo(v){
                if(!v){
                    let lang = this.getStore('lang')
                    this.lang = this.langOption[lang]?lang:'zh'
                }else {
                    this.lang = v;
                    this.$i18n.locale = this.lang;//关键语句
                    this.setStore('lang',v)
                    this.$router.go(0)
                }
            },

            handleSelect(key,keypath){
                if(keypath[0] === 'lang'){
                    this.langInfo(key)
                }else if(keypath[0] === 'info'){
                    this[key]()
                }
            }
        },
        created(){
            this.langInfo()
        }

    }
</script>

<style lang="less">
    .layout-header-bar{
        background: linear-gradient(90deg,#8576d8,#56e0f6);
        position: absolute;
        display: flex;
        top:0;
        width: 100%;
        height: 60px;
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
        align-items: center;
        .layout-logo{
            font-size: 20px;
            color: #ffffff;
            margin-left: 20px;
        }
       .layout-menu
       {
          position:absolute;
          right:50px;
          font-size: 20px;
          color: #ffffff;
       }
    }
    .el-submenu__title .el-dropdown-link *{
        vertical-align: baseline;
    }
    .layout-header-bar .el-menu--horizontal>.el-submenu .el-submenu__title{
        color: #fff !important;
    }
    .layout-header-bar .el-menu--horizontal>.el-submenu .el-submenu__title{
        background-color: unset !important;
    }
    .layout-header-bar .el-submenu__title i{
        color: #fff;
    }
    .el-menu--horizontal  .el-menu--popup{
        background-color: #fff !important;
    }


</style>